<script setup name="home">
import { useRouter, useRoute } from 'vue-router';
import { computed } from 'vue';
import { useStore } from 'vuex';

const router = useRouter();
const route = useRoute();

const store = useStore();

// 全部分类
const allcommodity = computed(() => store.state.home.categoryList);
// 轮播图
const bannerList = computed(() => store.state.home.bannerList);
// 新鲜好物
const newList = computed(() => store.state.home.newList);

onBeforeMount(async () => {
  await store.dispatch('home/getCategory');
  await store.dispatch('home/getBanner');
  await store.dispatch('home/getNew');
});

// activated() {

// },

// deactivated() {

// },

function goToLogin() {
  router.push('/login');
}
</script>

<template>
  <div class="common-layout">
    <el-container
      class="headline-one"
    >
      <el-header
        class="headline"
      >
        <a href="">请先登录</a>
        <i>|</i>
        <a href="">免费注册</a>
        <i>|</i>
        <a href="">我的订单</a>
        <i>|</i>
        <a href="">会员中心</a>
        <i>|</i>
        <a href="">帮助中心</a>
        <i>|</i>
        <a href="">关于我们</a>
        <i>|</i>
        <a href="">手机版</a>
        <i>|</i>
      </el-header>
    </el-container>
    <div
      class="category-one"
    >
      <div
        class="category"
      >
        <h1>
          <img src="http://erabbit.itheima.net/img/logo.0940ebb5.png" alt="">
        </h1>
        <a
          href=""
          v-for="item in allcommodity"
          :key="item"
        >
          {{ item.name }}
        </a>
        <div
          class="search"
        >
          <svg t="1662206536128" class="magnifying-glass" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1102" width="200" height="200"><path d="M976.896 933.248L835.072 791.424C983.04 614.016 973.696 347.52 807.808 181.76c-85.504-85.504-199.168-132.608-320-132.608S253.312 96.256 167.808 181.76C82.304 267.264 35.2 380.928 35.2 501.76c0 120.96 47.104 234.624 132.608 320.128C254.72 908.928 369.664 954.88 487.168 954.88c59.776 0 120.32-11.904 178.048-36.48 20.736-8.832 30.464-32.768 21.632-53.376-8.832-20.736-32.64-30.464-53.376-21.632-140.16 59.648-300.16 28.544-407.808-79.104-70.144-70.144-108.8-163.2-108.8-262.4 0-99.072 38.656-192.256 108.8-262.4s163.2-108.8 262.4-108.8 192.128 38.656 262.272 108.8c142.592 142.592 144.256 376.32 3.84 520.832-0.64 0.768-0.896 1.536-1.536 2.304-0.768 0.64-1.664 0.896-2.304 1.664a40.71424 40.71424 0 0 0 0 57.728l168.96 168.96c7.936 7.936 18.432 11.904 28.8 11.904 10.496 0 20.864-3.968 28.8-11.904 15.872-16 15.872-41.856 0-57.728z m0 0" p-id="1103"></path></svg>
          <input
            class="input-search"
            type="text"
            placeholder="搜一搜"
          >
          <svg t="1662206955942" class="shopping-trolley" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="908" width="200" height="200"><path d="M352.456912 832.032253c-35.434907 0-63.989249 28.554342-63.989249 63.989249 0 35.434907 28.554342 63.989249 63.989249 63.989249s63.989249-28.554342 63.989249-63.989249C416.446162 860.586595 387.891819 832.032253 352.456912 832.032253L352.456912 832.032253z" p-id="909"></path><path d="M800.55367 832.032253c-35.434907 0-63.989249 28.554342-63.989249 63.989249 0 35.434907 28.554342 63.989249 63.989249 63.989249s63.989249-28.554342 63.989249-63.989249C864.54292 860.586595 835.816563 832.032253 800.55367 832.032253L800.55367 832.032253z" p-id="910"></path><path d="M864.026877 800.037628 344.200235 800.037628c-46.099782 0-86.695112-36.466991-92.199563-83.082815l-54.356459-382.043339L166.853687 156.360826c-1.892155-15.653284-16.169326-28.382328-29.930455-28.382328L95.983874 127.978498c-17.717453 0-31.994625-14.277171-31.994625-31.994625s14.277171-31.994625 31.994625-31.994625l40.767344 0c46.615824 0 87.727196 36.466991 93.403662 83.082815l30.790526 177.86259L315.473879 708.698135c1.720141 14.793214 15.309256 27.350244 28.726356 27.350244l519.826642 0c17.717453 0 31.994625 14.277171 31.994625 31.994625S881.744331 800.037628 864.026877 800.037628z" p-id="911"></path><path d="M384.279523 672.05913c-16.685369 0-30.618512-12.729044-31.82261-29.586427-1.376113-17.545439 11.868974-33.026709 29.586427-34.230808l434.163615-31.994625c15.997312-0.172014 29.414413-12.55703 31.134554-26.834201l50.400134-288.295649c1.204099-10.664875-1.720141-22.533848-8.084663-29.758441-4.128339-4.644381-9.288762-7.052579-15.309256-7.052579L319.946246 224.3064c-17.717453 0-31.994625-14.277171-31.994625-31.994625S302.400806 159.973123 319.946246 159.973123l554.05745 0c24.426004 0 46.959852 10.148833 63.301193 28.554342 18.749538 21.157736 27.178229 50.744163 23.565933 81.706703l-50.400134 288.467663c-5.504452 44.895683-45.927768 81.362674-92.027549 81.362674l-431.755417 31.82261C385.82765 671.887116 384.967579 672.05913 384.279523 672.05913z" p-id="912"></path></svg>
        </div>
      </div>
    </div>
  </div>
  <main>
    <ul
      class="slideshow-left"
    >
      <li
        v-for="item in allcommodity"
        :key="item"
      >W
        {{ item.children.name }}
      </li>
    </ul>
    <el-carousel height="500px" :interval="5000" arrow="always">
      <el-carousel-item v-for="item in bannerList" :key="item">
        <img :src="item.imgUrl" alt="">
      </el-carousel-item>
    </el-carousel>
    <div>
      <div></div>
    </div>
  </main>
</template>

  <style lang="scss" scoped>

    * {
      margin: 0;
      padding: 0;
      text-decoration:none;
    }


    .headline-one {
      background-color: black;
        .headline {
        width: 1240px;
        height: 53px;
        display: flex;
        justify-content: flex-end;
        background-color: black;
        line-height: 53px;
        margin: 0 auto;

        a {
            text-decoration: none;
            color: #cdcdcd;
            margin: 5px;
        }
        i {
          color: aliceblue;
          font-style:normal
        }
      }
    }

    .category-one {
        .category {
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 1240px;
          height: 132px;
          margin: 0 auto;
        a{
          color: black;
        }
        img {
          width: 200px;
          height: 100%;
        }

        // 搜索
        .search {
          width: 220px;
          height: 32px;
          border-bottom: 1px solid #cacbcc ;

          // 放大镜
          .magnifying-glass {
          width: 18px;
          height: 19px;
          transform: translateY(5px)
          }
          .input-search {
            border: none;
            outline: none;
          }
        // 购物车
          .shopping-trolley {
            width: 22px;
            height: 22px;
            transform: translateY(5px)
          }
        }

      }
    }


    main {
      width: 1240px;
      margin: 0 auto;
      position: relative;

      .slideshow-left {
        width: 250px;
        height: 500px;
        background-color: rgba(30,30,30,.7);
        position: absolute;
        z-index: 1;

        li {
          list-style: none;
        }
      }

      .el-carousel__item h3 {
        color: #b8247f;
        opacity: 0.75;
        line-height: 300px;
        margin: 0;
        text-align: center;
      }
        .el-carousel__item:nth-child(2n) {
        background-color: #295fab;
      }

      .el-carousel__item:nth-child(2n + 1) {
        background-color: #d3dce6;
      }
    }

  </style>
